<template>
  <div>
    <el-card class="extra-card">
      <div slot="header" class="clearfix d-flex align-items-center">
        <b>用血申请</b>
        <div class="mlauto">
          <el-tag type="primary">
            <b>
              血红蛋白：
              <i class="font20">{{ HGB }}</i>
              g/L
            </b>
          </el-tag>
          <el-tag type="success">
            <b>
              血小板：
              <i class="font20">{{ PLT }}</i>
              ×10^9/L
            </b>
          </el-tag>
        </div>
      </div>
      <el-table
        border
        :data="
          checkItems.filter((item) => {
            return item.BLOOD_TYPE_NAME.indexOf(filterBloodMatchTypeName) > -1
          })
        "
        stripe
        style="width: 100%"
        @row-click="fillMatchRecord"
      >
        <el-table-column
          align="center"
          label="输血目的"
          prop="BLOOD_PURPOSE"
          show-overflow-tooltip
          width="80"
        />
        <el-table-column
          align="center"
          label="用血方式"
          prop="date"
          show-overflow-tooltip
          width="80"
        >
          <template #default="scope">
            {{ getAttr(fastSlowMap, scope.row.FAST_SLOW) }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="血量(U)"
          prop="TRANS_CAPACITY"
          show-overflow-tooltip
          width="70"
        />
        <el-table-column
          align="center"
          label="血液要求"
          prop="BLOOD_TYPE_NAME"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          label="用血时间"
          prop="TRANS_DATE"
          show-overflow-tooltip
          width="115"
        >
          <template #default="{ row }">
            {{ getDate(row.TRANS_DATE) }}
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
  import { fastSlowMap } from '@/utils/constant'
  import { getAttr, getFilterBloodMatchTypeName } from '@/utils'
  import { mapGetters } from 'vuex'
  export default {
    props: {
      // eslint-disable-next-line vue/prop-name-casing
      HGB: {
        type: String,
        default() {
          return ''
        },
      },
      // eslint-disable-next-line vue/prop-name-casing
      PLT: {
        type: String,
        default() {
          return ''
        },
      },
      checkItems: {
        type: Array,
        default() {
          return []
        },
      },
    },
    data() {
      return {
        fastSlowMap,
      }
    },
    computed: {
      ...mapGetters({ bloodMatchTypePid: 'initialData/bloodMatchTypePid' }),
      filterBloodMatchTypeName() {
        // console.log(this.bloodMatchTypePid)
        return getFilterBloodMatchTypeName(this.bloodMatchTypePid)
      },
    },
    methods: {
      getDate(time) {
        return time.substr(0, time.length - 3)
      },
      getAttr(formData, field) {
        return getAttr(formData, field)
      },
      fillMatchRecord(row) {
        this.$emit('fillMatchRecord', row)
      },
    },
  }
</script>

<style lang="scss" scoped></style>
